<template>
  <a-card>
    <template v-if="title" #header>
      <a-page-header v-if="back && title" @back="goBack">
        <template #title>
          <span class="text-large font-600 mr-3"> {{ title }} </span>
        </template>
      </a-page-header>
      <div v-if="!back && title" class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
        <a-tooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
        </a-tooltip>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </a-card>
</template>
<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';

  const router = useRouter();

  defineProps({
    title: propTypes.string.def(''),
    message: propTypes.string.def(''),
    back: propTypes.bool.def(false),
  });

  const goBack = () => {
    router.back();
  };
</script>
